<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <!--侧边栏-->
        <el-aside width="200px">
            <div style="background: #b3d8ff;width:100%">
                <span style="font-size: 30px;color: white">现有分类列表</span>
            </div>
                <el-menu
                        @select="selectOne"
                        @open="selectOne"
                        @close="selectOne"
                        class="el-menu-vertical-demo">
                    <el-submenu  :index="c.id" v-for="c in categories">
                        <template slot="title">
                            <i class="el-icon-folder"></i>
                            <span>{{c.name}}</span>
                        </template>
                        <el-menu-item-group v-for="cc in c.categories">
                            <el-menu-item :index="cc.id">
                                <template slot="title">
                                    <i class="el-icon-tickets"></i>
                                    <span>{{cc.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
        </el-aside>
        <el-container>
            <!--顶栏-->
            <el-header>
                <!--<el-table
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="id"
                            label="分类编号">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分类名称">
                    </el-table-column>
                    <el-table-column
                            prop="pid"
                            label="父级菜单">
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="添加人">
                    </el-table-column>
                    <el-table-column
                            prop="mintroduction"
                            label="分类介绍">
                    </el-table-column>
                    <el-table-column
                            prop="companyId"
                            label="公司">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入分类名称搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>-->
                <el-row>
                    <!--<el-col :span="8" style="background-color: #13ce66"> </el-col>-->
                    <el-col :span="8" :offset="6">
                            <el-button type="warning" icon="el-icon-plus"
                                       @click="dialogFormVisible = true">新增分类</el-button>
                            <el-button type="danger" icon="el-icon-delete"
                                       @click="formDelete">删除该分类</el-button>
                        <el-form :model="categoryShow" label-position="right" label-width="88px">
                            <el-form-item label="分类名称" >
                                <el-input v-model="categoryShow.name" ></el-input>
                            </el-form-item>
                            <el-form-item label="添加人">
                                <el-select v-model="categoryShow.userId" placeholder="此选项必填">
                                    <el-option
                                            v-for="u in users"
                                            :label="u.userName"
                                            :value="u.userName">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分类编号" >
                                <el-input v-model="categoryShow.mnumber" ></el-input>
                            </el-form-item>
                            <el-form-item label="分类介绍" >
                                <el-input v-model="categoryShow.mintroduction" ></el-input>
                            </el-form-item>
                            <el-form-item label="父级菜单">
                                <el-select v-model="categoryShow.pid" placeholder="此选项必填">
                                    <el-option
                                            v-for="f in fCategory"
                                            :label="f.name"
                                            :value="f.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="公司">
                                <el-select v-model="categoryShow.companyId" placeholder="此选项必填">
                                    <el-option
                                            v-for="c in companies"
                                            :label="c.companyName"
                                            :value="c.companyName">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-form>
                                <el-button type="primary" @click="formUpdate">保存并应用</el-button>
                                <el-button type="primary" @click="selectOne(categoryShow.id)">取 消</el-button>
                    </el-col>
                    <!--<el-col :span="8" style="background-color: #13ce66"> </el-col>-->
                </el-row>

            </el-header>
            <!--主栏-->
        </el-container>
    </el-container>

    <el-dialog title="商品分类" :visible.sync="dialogFormVisible" @close="closeThis">
        <el-form :model="category">
            <el-form-item label="分类名称" >
                <el-input v-model="category.name" ></el-input>
            </el-form-item>
            <el-form-item label="添加人">
                <el-select v-model="category.userId" placeholder="此选项必填">
                    <el-option
                            v-for="u in users"
                            :label="u.userName"
                            :value="u.userName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类编号" >
                <el-input v-model="category.mnumber" ></el-input>
            </el-form-item>
            <el-form-item label="分类介绍" >
                <el-input v-model="category.mintroduction" ></el-input>
            </el-form-item>
            <el-form-item label="父级菜单">
                <el-select v-model="category.pid" placeholder="此选项必填">
                    <el-option
                            v-for="f in fCategory"
                            :label="f.name"
                            :value="f.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司">
                <el-select v-model="category.companyId" placeholder="此选项必填">
                    <el-option
                            v-for="c in companies"
                            :label="c.companyName"
                            :value="c.companyName">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCategory">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData:null,
                categories:null, //所有分类
                dialogFormVisible:false,
                category:{
                    id:'',
                    pid:'',
                    name:'',
                    userId:'',
                    mnumber:"",
                    mintroduction:"",
                    companyId:""
                },
                categoryShow:{
                    id:'',
                    pid:'',
                    name:'',
                    userId:'',
                    mnumber:"",
                    mintroduction:"",
                    companyId:""
                },
                companies:null,
                fCategory:null,
                users:null,
                search: ''
            }
        },
        methods: {
            /*handleEdit(index, row) {
                console.log(index, row);
                this.category=row;
                this.dialogFormVisible=true;
            },
            handleDelete(index, row) {
                if (confirm("确定要删除吗？")){
                    console.log(index, row);
                    axios.delete("/category/"+row.id)
                        .then(value => {
                            /!*if (value.data.code==1 && this.total-((this.curr-1)*this.pageSize)==1){
                                this.loadPage(this.curr-1,this.pageSize)
                            }else {
                                this.loadPage(this.curr,this.pageSize)
                            }*!/
                            this.loadPage()
                        }).catch(error => alert("出错啦"))
                }
            },*/
            formDelete() {
                if (confirm("确定要删除吗？")&&this.categoryShow.id!=''){
                    axios.delete("/category/"+this.categoryShow.id)
                        .then(value => {
                            /*if (value.data.code==1 && this.total-((this.curr-1)*this.pageSize)==1){
                                this.loadPage(this.curr-1,this.pageSize)
                            }else {
                                this.loadPage(this.curr,this.pageSize)
                            }*/
                            this.loadPage()
                            this.categoryShow={
                                id:'',
                                pid:'',
                                name:'',
                                userId:'',
                                mnumber:"",
                                mintroduction:"",
                                companyId:""
                            }
                            this.$message({
                                message: '删除成功',
                                type: 'danger'
                            });
                        }).catch(error => alert("出错啦"))
                }else {
                    this.$message({
                        message: '请选中左侧一个分类进行删除',
                        type: 'warning'
                    });
                }
            },
            formUpdate(){
                var id = this.categoryShow.id
                axios.put("/category",this.categoryShow).then(value => {
                    if (value.data.code==1){
                        this.loadPage();
                        this.selectOne(id)
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                }).catch(error => alert("出错啦"))
            },
            selectOne(id){
                /*for (let i = 0; i < this.categories.length; i++) {
                    for (let j = 0; j < this.categories[i].categories.length; j++) {
                        alert(this.categories[i].categories[j].id)
                            if (this.categories[i].categories[j].id==id){
                                this.tableData = this.categories[i].categories[j];
                                console.log(this.tableData)
                                return
                            }
                    }
                }*/

                axios.get("/category?id="+id).then(value => {
                    if(value.data.code == 1){
                        /*this.tableData = value.data.data;*/
                        this.categoryShow = value.data.data[0];
                    }
                })
            },
            closeThis(){
                this.category={
                    id:'',
                    pid:'',
                    name:'',
                    userId:'',
                    mnumber:"",
                    mintroduction:"",
                    companyId:""
                }
            },
            saveCategory(){
                if (this.category.id==''){
                    axios.post("/category",this.category).then(value => {
                        if (value.data.code==1){
                            this.loadPage();
                            this.selectOne(value.data.data)
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                    }).catch(error => alert("出错啦"))
                }else {
                    var id = this.category.id
                    axios.put("/category",this.category).then(value => {
                        if (value.data.code==1){
                            this.loadPage();
                            this.selectOne(id)
                        }
                    }).catch(error => alert("出错啦"))
                }
                this.dialogFormVisible=false
            },
            loadPage(){
                axios.get("/categories").then(value => {
                    if(value.data.code == 1){
                        this.categories = value.data.data;
                        this.tableData = value.data.data

                    }
                })
            }
        },
        mounted() {
            //加载页面
            this.loadPage();
            //加载公司
            axios.get("/companies").then(value => {
                if(value.data.code == 1){
                    this.companies = value.data.data;
                }
            });
            //加载父级菜单
            axios.get("/categories/pid").then(value => {
                if(value.data.code == 1){
                    this.fCategory = value.data.data;
                }
            });
            //加载添加人
            axios.get("/usersname").then(value => {
                if(value.data.code == 1){
                    this.users = value.data.data;
                }
            });
        }

    });
</script>
</html>